<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .login-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 420px;
            padding: 40px 35px;
            transition: all 0.3s ease;
        }

        .login-header {
            text-align: center;
            margin-bottom: 35px;
        }

        .login-header h1 {
            color: #333;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .login-header p {
            color: #666;
            font-size: 15px;
        }

        .form-group {
            margin-bottom: 22px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 1.5px solid #e1e5e9;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s;
            background-color: #f9fafb;
        }

        .form-control:focus {
            outline: none;
            border-color: #667eea;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(102, 126, 234, 0.2);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
            vertical-align: middle;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .message {
            padding: 12px 16px;
            border-radius: 8px;
            margin-top: 20px;
            font-size: 14px;
            display: none;
        }

        .error {
            background-color: #ffeaea;
            color: #d32f2f;
            border-left: 4px solid #d32f2f;
        }

        .success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border-left: 4px solid #2e7d32;
        }

        .footer {
            text-align: center;
            margin-top: 25px;
            color: #666;
            font-size: 14px;
        }

        .footer a {
            color: #667eea;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        @media (max-width: 480px) {
            .login-container {
                padding: 30px 25px;
            }

            .login-header h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-header">
        <h1>欢迎登录</h1>
        <p>请输入您的用户名和密码</p>
    </div>

    <form id="loginForm">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" class="form-control" placeholder="请输入用户名" required>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
        </div>

        <button type="submit" class="btn" id="loginBtn">
            <span id="btnText">登录</span>
        </button>

        <div id="message" class="message"></div>
    </form>

    <div class="footer">
        <p>还没有账户？<a href="#">立即注册</a></p>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const loginForm = document.getElementById('loginForm');
        const loginBtn = document.getElementById('loginBtn');
        const btnText = document.getElementById('btnText');
        const messageDiv = document.getElementById('message');

        // 表单提交事件
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            // 简单验证
            if (!username || !password) {
                showMessage('请输入用户名和密码', 'error');
                return;
            }

            // 显示加载状态
            setLoadingState(true);

            // 准备请求数据
            const requestData = {
                username: username,
                password: password
            };

            // 发送登录请求
            fetch('/v1/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    return response.json();
                })
                .then(data => {
                    // 处理响应数据
                    if (data.state === 2000) {
                        // 登录成功
                        showMessage(`登录成功！欢迎 ${data.data.username}`, 'success');
                        // 在实际应用中，这里可能会跳转到其他页面或保存token
                        console.log('用户信息:', data.data);
                    } else if (data.state === 1001) {
                        // 用户名或密码错误
                        showMessage(data.message, 'error');
                    } else {
                        // 其他错误
                        showMessage('登录失败，请稍后重试', 'error');
                    }
                })
                .catch(error => {
                    console.error('登录请求失败:', error);
                    showMessage('网络错误，请检查网络连接', 'error');
                })
                .finally(() => {
                    // 恢复按钮状态
                    setLoadingState(false);
                });
        });

        // 显示消息函数
        function showMessage(text, type) {
            messageDiv.textContent = text;
            messageDiv.className = 'message ' + type;
            messageDiv.style.display = 'block';

            // 5秒后自动隐藏消息
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 5000);
        }

        // 设置加载状态
        function setLoadingState(isLoading) {
            if (isLoading) {
                loginBtn.disabled = true;
                btnText.innerHTML = '<span class="loading"></span>登录中...';
            } else {
                loginBtn.disabled = false;
                btnText.textContent = '登录';
            }
        }
    });
</script>
</body>
</html>